<template>
  <div class="container">
    <!-- 抽奖盒子 -->
    <div class="luck-draw-box">
      <div :class="['luck-item', nowChoose == 1 ? 'choose' : '']"></div>
      <div :class="['luck-item', nowChoose == 2 ? 'choose' : '']"></div>
      <div :class="['luck-item', nowChoose == 3 ? 'choose' : '']"></div>
      <div :class="['luck-item', nowChoose == 8 ? 'choose' : '']"></div>
      <div class="luck-item submit" @click="getRandom">抽奖</div>
      <div :class="['luck-item', nowChoose == 4 ? 'choose' : '']"></div>
      <div :class="['luck-item', nowChoose == 7 ? 'choose' : '']"></div>
      <div :class="['luck-item', nowChoose == 6 ? 'choose' : '']"></div>
      <div :class="['luck-item', nowChoose == 5 ? 'choose' : '']"></div>
      <!-- 闪动盒子 -->
      <div class="move-box"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowChoose: 0,
      timer: null,
      period: 0,
      myAppoint: 200,
      finalNum: 0,
    }
  },
  mounted() {},
  methods: {
    //获取随机值
    getRandom() {
      console.log(this.period)
      if (this.period != 0) return
      console.log('进去')
      this.finalNum = parseInt(Math.random() * 8, 10) + 1
      this.switchTimer()
    },
    //切换定时器
    switchTimer() {
      //防止运行中点击
      let that = this
      this.period += 50
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        if (this.nowChoose == this.finalNum && this.period == this.myAppoint) {
          console.log('锁定')
          clearInterval(this.timer)
          this.period = 0
          return
        }
        if (this.nowChoose == 8) {
          console.log('新的一圈')
          that.switchTimer()
          this.nowChoose = 1
        } else {
          this.nowChoose++
        }
      }, this.period)
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(
    180deg,
    #7ccff1 5%,
    #4196ea 25%,
    #1d88fa 50%,
    #0a8233 100%
  );
  .luck-draw-box {
    position: relative;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 80vw;
    height: 80vw;
    background-color: pink;
    padding: 10px;
    border-radius: 20px;
    .luck-item {
      width: 29%;
      height: 29%;
      background-color: #fff;
      margin: 5px;
      box-sizing: border-box;
      border-radius: 10px;
    }
    .submit {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      font-weight: 800;
      background-color: pink;
      border: 5px solid red;
    }
    .choose {
      // border: 5px solid rgba(25, 194, 250, 0.5);
      background-color: rgb(255, 68, 99);
    }
  }
}
</style>
